<template>
  <div>
    <!-- 图表容器，通过 ref 绑定到 chartDom -->
    <div ref="chartDom" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// 创建一个 ref，用于获取模板中的 DOM 元素
const chartDom = ref<HTMLDivElement | null>(null);
// 创建一个 ref，用于存储 ECharts 实例
const myChart = ref<echarts.ECharts | null>(null);

// 初始化图表的函数
const initChart = () => {
  if (chartDom.value) {
    myChart.value = echarts.init(chartDom.value);
    const option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '销量',
          type: 'pie', // 指定图表类型为饼状图
          radius: '50%', // 饼图的半径
          data: [
            { value: 1048, name: '衬衫' },
            { value: 735, name: '羊毛衫' },
            { value: 580, name: '雪纺衫' },
            { value: 484, name: '裤子' },
            { value: 300, name: '高跟鞋' },
            { value: 200, name: '袜子' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    myChart.value.setOption(option);
  }
};

// 在组件挂载后初始化图表
onMounted(() => {
  initChart();
});
</script>

<style scoped>
/* 确保图表容器有正确的样式 */
div {
  width: 600px;
  height: 400px;
}
</style>